<template>
	<view class="login-page">
		<image class="app-logo" src="/static/logo/logo.png"></image>
		<input type="text" v-model="username" placeholder="请输入用户名" class="input-box" />
		<input type="password" v-model="password" placeholder="请输入密码" class="input-box" />
		<button @click="doLogin" class="login-button">登录</button>
		<view class="forgot-password-link">忘记密码？</view>
		<view class="register-link">没有账号？去注册</view>
	</view>
</template>

<script>
	import {
		ref
	} from 'vue';

	export default {
		setup() {
			// 使用ref创建响应式数据，用于存储用户名和密码
			const username = ref('');
			const password = ref('');

			const doLogin = () => {
				// 模拟登录逻辑，这里可以替换为实际的接口调用
				if (username.value === '123' && password.value === '123') {
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					// 登录成功后跳转到index页面
					uni.switchTab({
						url: "/pages/index/index"
					});
				} else {
					uni.showToast({
						title: '用户名或密码错误',
						icon: 'none'
					});
				}
			};

			return {
				username,
				password,
				doLogin
			};
		}
	};
</script>

<style>
	.login-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.app-logo {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 10rpx;
		/* 减少底部边距 */
		transform: translateY(-100rpx);
		/* 向上移动一定距离 */
	}

	.input-box {
		width: 80%;
		padding: 30rpx;
		margin-bottom: 40rpx;
		border: 1px solid #ccc;
		border-radius: 16rpx;
	}

	.login-button {
		width: 80%;
		padding: 30rpx;
		background-color: #007BFF;
		color: #fff;
		border: none;
		border-radius: 16rpx;
		cursor: pointer;
	}

	.forgot-password-link {
		margin-top: 30rpx;
		color: #666;
	}

	.register-link {
		margin-top: 20rpx;
		color: #007BFF;
		text-decoration: underline;
	}
</style>